<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        body {
            background: #000;
            text-align: center;
            font: 12px/20px Arial;
        }

        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 8px;
            margin: 10px auto;
        }

        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        #box .list li.current {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
            overflow: hidden;
        }

        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            background: #f90;
            opacity: 0.7;
            filter: alpha(opacity=70);
            border-radius: 20px;
        }

        #box .count li.current {
            color: #fff;
            opacity: 1;
            filter: alpha(opacity=100);
            font-weight: 700;
            background: #f60;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            var aUl = document.getElementsByTagName("ul");
            var aImg = aUl[0].getElementsByTagName("li");
            var aNum = aUl[1].getElementsByTagName("li");
            var timer = play = null;
            var i = index = 0;
            //切换按钮
            for (i = 0; i < aNum.length; i++) {
                aNum[i].index = i;
                aNum[i].onmouseover = function () {
                    show(this.index);
                }
            }

            //鼠标滑过关闭自动播放
            oBox.onmouseover = function () { clearInterval(play) };
            //鼠标离开启动自动播放
            oBox.onmouseout = function () { autoPlay() };

            autoPlay();
            //自动播放效果
            function autoPlay() {
                play = setInterval(function () {
                    index++;
                    index >= aImg.length && (index = 0);
                    show(index)
                }, 2000)
            }

            //图片切换
            function show(a) {
                index = a;
                var alpha = 0;
                for (var x in aNum) aNum[x].className = "";
                aNum[index].className = "current";
                clearInterval(timer);

                //此处为初始化页面效果
                for (i = 0; i < aImg.length; i++) {
                    aImg[i].style.opacity = 0;
                    aImg[i].style.filter = "alpha(opacity=0)";
                }
                //实现淡入淡出效果
                timer = setInterval(function () {
                    alpha += 2;
                    alpha > 100 && (alpha = 100);
                    aImg[index].style.opacity = alpha / 100;
                    aImg[index].style.filter = "alpha(opacity=alpha)";
                    alpha == 100 && clearInterval(timer);
                }, 50);
            }
        }
    </script>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li class="current"><img src="./8.jpg" alt="111" width="490" height="170"></li>
            <li><img src="./9.jpg" alt="222" width="490" height="170"></li>
            <li><img src="./8.jpg" alt="333" width="490" height="170"></li>
            <li><img src="./9.jpg" alt="444" width="490" height="170"></li>
            <li><img src="./8.jpg" alt="555" width="490" height="170"></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

</html>